<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: winTop, width: '100%' }" />

    <!-- 顶部 Tab -->
    <view class="tabHeader" :style="{ '--tabIndex': tabIndex }">
      <view class="tan-item" @click="switchTab(0)">已经核销(1人)</view>
      <view class="tab-item" @click="switchTab(1)">未核销(99人)</view>
      <view class="line" :style="{ left: `calc(5rpx + (${tabIndex} * 230rpx))` }" />
    </view>

    <!-- 内容容器，mescroll-body 占据 flex-1 区域 -->
    <view class="flex-1">
      <mescroll-uni
        :height="height"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
        :up="upOption"
        :flex="true"
		:toTop="{
			bottom:140
		}"
	
      >
        <view v-for="item in dataList" :key="item" class="item">
          数据列表...{{ item }}
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Three',
  data() {
    return {
      winTop: '44px',       // 顶部预留
      tabIndex: 0,
      height: '600px',      // mescroll-body 实际高度
      mescroll: null,
      dataList: [],
      totalPage: 50,
      pageSize: 10,
      downOption: {
        auto: true,
        use: true
      },
      upOption: {
        auto: true,
        use: true,
        textNoMore: '没有更多了~'
      }
    };
  },
  created() {
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.winTop = menuButtonInfo.top + 'px';
  },
  mounted() {
    this.$nextTick(() => {
      this.getBoxHeight();
    });
  },
  methods: {
    switchTab(index) {
      if (this.tabIndex !== index) {
        this.tabIndex = index;
        this.dataList = [];
        this.$nextTick(() => {
          this.getBoxHeight();
          this.mescroll.resetUpScroll(); // 重置分页
        });
      }
    },
    getBoxHeight() {
      // 自动计算容器高度
      const query = uni.createSelectorQuery().in(this);
      query.select('.flex-1').boundingClientRect(data => {
        if (data && data.height) {
          this.height = `${data.height}px`;
        }
      }).exec();
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
	  mescroll.triggerDownScroll()
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      console.log('加载页码：', page.num);
      setTimeout(() => {
        const newList = Array(20).fill().map((_, i) =>
          `Tab${this.tabIndex + 1}-第${(page.num - 1) * this.pageSize + i + 1}项`
        );
        this.dataList = this.dataList.concat(newList);
        const hasNext = page.num < this.totalPage;
		       this.mescroll.endByPage(this.dataList.length, this.totalPage);
			   
			   setTimeout(()=>{
				    this.mescroll.endSuccess(newList.length, hasNext);
			   },200)
			   
       
      }, 500);
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
}

.flex-1 {
  flex: 1;
  overflow: hidden;
}

.tabHeader {
  display: flex;
  position: relative;
  padding-bottom: 15rpx;
  background-color: #fff;
  z-index: 10;
}

.tan-item,
.tab-item {
  width: 230rpx;
  padding: 5rpx 10rpx;
  text-align: center;
}

.line {
  width: 220rpx;
  height: 4rpx;
  position: absolute;
  bottom: 0;
  background-color: #1877ff;
  transition: left 0.3s ease;
}

mescroll-body {
  flex: 1;
  width: 100%;
  height: 100%;
  display: block;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20rpx;
}

.item {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}
</style>
